<template>
  <div>
    <div class="ratio">
      <el-row type="flex" align="middle" class="item">
        <div class="title">到账积分</div>
        <div class="price">{{ balance }} 积分</div>
      </el-row>
      <el-row type="flex" align="middle" class="item">
        <div class="title">支付金额</div>
        <div><edu-input-number :args="{ min: 0, precision: 2 }" :value.sync="pay" /></div>
      </el-row>
    </div>
  </div>
</template>

<script>
import EduInputNumber from '@public/form/input_number';
export default {
  components: {
    EduInputNumber
  },
  props: {
    value: {
      type: String,
      default: '100:100'
    }
  },
  data() {
    return {
      pay: this.value.split(':')[0],
      balance: '100'
    };
  },
  watch: {
    pay(pay) {
      this.$emit('update:value', pay + ':' + this.balance);
    },
    balance(balance) {
      this.$emit('update:value', this.pay + ':' + balance);
    }
  }
};
</script>

<style scoped lang="scss">
.ratio {
  .item {
    margin-bottom: 15px;
    ::v-deep.el-col {
      margin-right: 10px;
    }
    .title {
      margin-right: 10px;
    }
    .price {
      color: #f54030;
    }
  }
}
</style>
